<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>

<script>
	window.onload=function(){
		canvas = document.getElementById('mycanvas');
		ctx = canvas.getContext('2d');
		var color=new Array('#ff0000','#ff00ff','#00ffff','#0000ff','#00ff00','#f0f0f0');
		var value=new Array(90,40,60,20,180,90);		
		ctx.strokeStyle='#0000ff';
		ctx.lineWidth='6';
		var term=140;
		
		// 막대 그래프 십자선
		ctx.beginPath();
		ctx.moveTo(20,203);
		ctx.lineTo(600,203);
		ctx.moveTo(term-3,10);
		ctx.lineTo(term-3,260);
		ctx.closePath();
		ctx.stroke();
		
		for(i=0;i<color.length;i++){
			ctx.fillStyle=color[i];
			ctx.fillRect(term,200-value[i],40,value[i]);
			term += 40;
		}
		
		
		
		// 선 그래프 십자선
		term=140;
		ctx.beginPath();
		ctx.moveTo(20,453);
		ctx.lineTo(600,453);
		ctx.moveTo(term-3,290);
		ctx.lineTo(term-3,660);
		ctx.closePath();
		ctx.stroke();

		ctx.beginPath();
		ctx.moveTo(term, value[0]+260);		
		for(i=0;i<color.length;i++){
			ctx.lineTo(term,value[i]+260);
			term += 80;
			
		}
		ctx.stroke();
		
		
	}
</script>

</head>
<body>
	<canvas id='mycanvas' width='600px' height='500px'>
	</canvas>
</body>
</html>